<template>
  <div>
    <div class="Container">
      <div class="left">
        <img class="avatar" src="//yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" alt="" />
        <div class="info">
          <p class="phoneNumber">189****3369</p>
          <div>
            <i class="icon"><van-icon name="vip-card-o" /></i>
          </div>
        </div>
        <div>
          <span class="tag">会员等级更新</span>
          <span class="desc">本期会员等级已更新，查看我的特权></span>
        </div>
        <!-- v-model:show="show" -->
      </div>
      <div class="money">
        <p style="margin-left: 20px">我的资产</p>

        <hr />
      </div>
      <div class="list">
        <div class="listItem">
          <p class="listCount">
            <span class="unit">￥</span>
            <span class="value"
              >0
              <span class="red"></span>
            </span>
          </p>
          <p class="listName">余额</p>
        </div>
        <div class="listItem">
          <p class="listCount">
            <span class="unit"></span>
            <span class="value">0</span>
          </p>
          <p class="listName">红包</p>
        </div>
        <div class="listItem">
          <p class="listCount">
            <span class="unit"></span>
            <span class="value">1</span>
          </p>
          <p class="listName">优惠券</p>
        </div>
        <div class="listItem">
          <p class="listCount">
            <span class="unit"></span>
            <span class="value">0</span>
          </p>
          <p class="listName">积分</p>
        </div>
        <div class="listItem">
          <p class="listCount">
            <span class="unit"></span>
            <span class="value">0</span>
          </p>
          <p class="listName">礼品卡</p>
        </div>
      </div>
      <div class="g-row">
        <div class="m-uMenu">
          <ul class="g-list">
            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="description" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">我的订单</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="user-circle-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">账号管理</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="phone-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">我的手机号</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="calendar-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">周六一起拼</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="shield-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">售后服务</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="gift-card" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">邀请返利</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="bag-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">优先购</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="gold-coin-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">积分中心</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="diamond-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">会员俱乐部</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="location-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">地址管理</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="passed" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">支付安全</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="service-o" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">帮助与客服</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="records" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">意见反馈</span>
              </div>
            </li>

            <li class="item">
              <div class="m-uMenuItem">
                <van-icon class="itemIcon" name="points" />
                <span calss="txt" style="font-size: 14px; position: absolute; left: 37px; top: 46px">我的竞拍</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <van-button class="personBtn" type="danger" @click="logOut" size="large">退出登录</van-button>
      <TabBar></TabBar>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'adminCenter'
})
</script>
<script lang="ts" setup>
import userLogin from '@/api/userLogin'
import { showSuccessToast, showFailToast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const logOut = async () => {
  try {
    await userLogin.LogOut()
    localStorage.removeItem('token')
    showSuccessToast('退出登录')
    router.push('/')
  } catch (error) {
    showFailToast('退出失败')
  }
}
</script>

<style lang="less" scoped>
.Container {
  height: 100%;
}
.left {
  position: relative;
  height: 160px;
  background-image: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
}
.avatar {
  position: absolute;
  top: 50px;
  left: 30px;
  vertical-align: middle;
  border-radius: 50%;
  width: 53px;
  height: 53px;
}
.phoneNumber {
  position: absolute;
  font-size: 14px;
  color: white;
  top: 60px;
  left: 100px;
}
.icon {
  position: absolute;
  top: 80px;
  left: 100px;
}
.tag {
  color: white;
  width: 86px;
  height: 17px;
  // display: inline-block;
  font-size: 12px;
  position: relative;
  top: 120px;
  left: 25px;
  height: 100px;
  border: 0.3px solid gainsboro;
}
.desc {
  position: absolute;
  font-size: 12px;
  top: 128px;
  left: 105px;
  color: white;
}
.money {
  height: 59px;
  line-height: 59px;
  font-size: 14px;
}
.money hr {
  width: 350px;
  margin-left: 14px;
}
.list {
  position: relative;
  text-align: center;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.listItem {
  position: relative;
  padding-top: 12px;
  height: 60px;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  flex-grow: 1;
}
.listCount {
  margin-bottom: 1.5px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}
.listCount .unit {
  margin-right: 1.5px;
  font-size: 9px;
  line-height: 13.5px;
}
.listCount .value {
  position: relative;
}
.listCount .value .red {
  width: 5.25px;
  height: 5.25px;
  position: absolute;
  top: -0.75px;
  right: -3.75px;
  border-radius: 50%;
  background-color: #dd1a21;
}
.listName {
  font-size: 9px;
  line-height: 13.5px;
}
.g-list {
  width: 375px;
  height: 454px;
}
.m-uMenu {
  margin-bottom: 15px;
  background-color: #fff;
}
.m-uMenu .list {
  zoom: 1;
}
.m-uMenu .item {
  float: left;
  width: 33.069%;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.m-uMenuItem {
  position: relative;
  display: block;
  height: 1.8rem;
  padding-top: 0.45rem;
  text-align: center;
}
.m-uMenuItem .itemIcon {
  height: 18.75px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 6px;
  width: 18.75px;
  position: absolute;
  right: 52.5px;
}
.personBtn {
  transform: translateY(-41px);
}
</style>
